<template>
  <div class="zhao">
    <!-- 消息 聊天 招呼 -->
    <div class="small" v-for="(v, i) in chick1" :key="i" @click="fun(i)">
      <p>
        <img :src="v.imgurl" alt="" />
      </p>
      <p>
        <span
          >{{ v.people }}<sub>{{ v.gangwei1 }}</sub></span
        >
        <span>{{ v.msage }}</span>
      </p>
      <span>{{ v.timer }}</span>
    </div>
  </div>
</template>

<script>
export default {
    data(){
    return {
      arrid:0
    }
  },
  computed:{
    chick1() {
      return this.$store.state.chick1;
    },
  },
   methods:{
    // fun(index){
    //   this.arrid = this.$store.state.chick1[index].id
    //   this.$router.push({ path: '/detail',query:{ id: this.arrid, i: index }})
    // }
  }
};
</script>

<style scoped>
.zhao {
  margin-top: 1.20rem;
}

.small {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0.26rem 0;
}
.small > p:nth-child(1) {
  position: relative;
  width: 0.50rem;
  height: 0.50rem;
  background: orange;
  border-radius: 50%;
}

.small > p:nth-child(1) > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.small > p:nth-child(2) {
  display: flex;
  flex-direction: column;
  margin-left: -0.10rem;
  width: 2.30rem;
}
.small > p:nth-child(2) > span:nth-child(1) {
  font-size: 0.16rem;
  font-weight: bold;
}
.small > p:nth-child(2) > span:nth-child(1) > sub {
  vertical-align: baseline;
  font-size: 0.12rem;
  color: #999;
}
.small > p:nth-child(2) > span:nth-child(2) {
  font-size: 0.12rem;
  color: #666;
}
.small > p:nth-child(2) > span:nth-child(3) {
  font-size: 0.15rem;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>